<template>
    <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 135px;margin: 0px;">
        <h1 style="font-size: 35px;">{{'欢迎你！'+user.userName}}</h1>
        <DateUtils></DateUtils>
        <el-descriptions  title="个人中心" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    账号
                </template>
                {{user.account}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-message"></i>
                    邮箱
                </template>
              {{user.email}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                   <i class="el-icon-coin"></i>
                    积分
                </template>
              {{user.points}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    性别
                </template>
                <el-tag
                        :type="user.gender === '1' ? 'primary' : 'danger'"
                        disable-transitions><i :class="user.gender==1?'el-icon-male':'el-icon-female'"></i>{{user.gender==1?"男":"女"}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag
                        type="success"
                        disable-transitions>{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"用户")}}</el-tag>

            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                   <i class="el-icon-time"></i>
                   注册时间
                </template>
            {{user.registerTime}}
          </el-descriptions-item>
          <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-time"></i>
                  上次登录
                </template>
            {{user.lastTime}}
          </el-descriptions-item>

        </el-descriptions>
        <el-button style="margin-top: 30px;" type="primary" @click="change">编辑信息</el-button>
        <el-button style="margin-top: 30px;" type="primary" @click="changePassword">修改密码</el-button>

        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>

          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="账号" prop="account">
              <el-col :span="20">
                <el-input v-model="form.account"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-col :span="20">
                <el-input v-model="form.userName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-col :span="20">
                <el-input v-model="form.phone"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-col :span="20">
                <el-input v-model="form.email"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="mod">确 定</el-button>
    </span>
        </el-dialog>

      <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible2"
          width="30%"
          center>

        <el-form ref="form" :rules="rules" :model="passwordForm" label-width="80px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-col :span="20">
              <el-input v-model="passwordForm.oldPassword"
                        show-password="off" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-col :span="20">
              <el-input v-model="passwordForm.newPassword"
                        show-password="off" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="再次输入" prop="confirmPassword">
            <el-col :span="20">
              <el-input v-model="passwordForm.confirmPassword"
                        show-password="off" size="small"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">-
      <el-button type="primary" @click="modP">确 定</el-button>
    </span>
      </el-dialog>


    </div>
</template>

<script>
    import DateUtils from "./DateUtils";
    export default {
        name: "Home",
        components: {DateUtils},
        data() {

            return {
                user:{},
                centerDialogVisible:false,
                centerDialogVisible2:false,
                form:{
                  id:'',
                  account:'',
                  userName:'',
                  password:'',
                  gender:'',
                  phone:'',
                  email:'',
                },
                passwordForm:{
                  oldPassword:'',
                  newPassword:'',
                  confirmPassword:'',
                },
                rules: {
                  oldPassword: [
                    {required: true, message: '请输入原密码', trigger: 'blur'},
                  ],
                  newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'}
                  ],
                  confirmPassword: [
                    {required: true,message: "请再次输入新密码",trigger: "blur"},
                  ]
                }
            }
        },
        computed:{

        },
        methods:{
            init(){
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            },
            resetForm() {
              this.$refs.form.resetFields();
            },
            change(){
              this.centerDialogVisible = true
              this.form.id = this.user.id
              this.form.account = this.user.account
              this.form.userName = this.user.userName
              this.form.password = this.user.password
              this.form.gender = this.user.gender+''
              this.form.phone = this.user.phone
              this.form.email = this.user.email
            },
            changePassword(){
              this.centerDialogVisible2 = true
              this.$nextTick(()=>{
                this.resetForm()
              })
              this.form.id = this.user.id
              this.form.account = this.user.account
              this.form.userName = this.user.userName
              this.form.password = this.user.password
              this.form.gender = this.user.gender+''
              this.form.phone = this.user.phone
              this.form.email = this.user.email
            },
            mod(){
              this.$axios.post(this.$httpUrl+'/sns-user/update',this.form).then(res=>res.data).then(res=>{
                console.log(res)
                if(res.code==200){

                  this.$message({
                    message: '修改成功！请重新登录',
                    type: 'success'
                  });
                  this.centerDialogVisible = false
                  this.$router.push("/Login")
                  sessionStorage.clear()
                }else{
                  this.$message({
                    message: '操作失败！',
                    type: 'error'
                  });
                }

              })
            },
            modP(){
              if(this.form.password!=this.passwordForm.oldPassword){
                  this.resetForm()
                  this.$message({
                    message: '原密码输入错误',
                    type: 'error'
                  });
              }else if(this.passwordForm.newPassword!=this.passwordForm.confirmPassword){
                  this.resetForm()
                  this.$message({
                    message: '新密码两次不一致',
                    type: 'error'
                  });
              }else{
                this.form.password = this.passwordForm.newPassword
                this.$axios.post(this.$httpUrl+'/sns-user/update',this.form).then(res=>res.data).then(res=>{
                  console.log(res)
                  if(res.code==200){

                    this.$message({
                      message: '修改成功！请重新登录',
                      type: 'success'
                    });
                    this.centerDialogVisible2 = false
                    this.$router.push("/Login")
                    sessionStorage.clear()
                  }else{
                    this.$message({
                      message: '操作失败！',
                      type: 'error'
                    });
                  }

                })
              }
            },
        },
        created(){
            this.init()
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;

        margin: 0 auto;
        text-align: center;
    }
</style>